<template>
	<!--使用单位账户 添加/编辑/详情 -->
	<div class="compile">
		<el-dialog :close-on-click-modal='false' :append-to-body='true' :before-close='close' :close-on-press-escape='false'
		 :title="title" :visible.sync="addAndCompileShow">
			<el-form :model="form" :rules="rules" ref="form" v-loading='isLoading'>
				<el-row>
					<div class="textLeft titleMessNow">用户信息:</div>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="真实姓名:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.userTrueName" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="电话:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.userPhone" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<div v-if="detailDisable">
					<el-row>
						<div class="textLeft titleMessNow">维保人员签名</div>
					</el-row>
					<el-row>
						<el-col :span="16" :offset='1'>
							<el-form-item label="照片:" :label-width="formLabelWidth">
								<el-image style="width: 100px; height: 100px;float:left;cursor: pointer;" :src="signImg" fit="cover" @click="lookBigImg"></el-image>
								<div slot="error" class="image-slot">
									<i class="el-icon-picture-outline"></i>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
				<el-row>
					<div class="textLeft titleMessNow">用户账号:</div>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="使用单位:" :label-width="formLabelWidth" prop="userCompany">
							<el-select size="mini" @focus="getUserUnit" :remote-method="findUserUnit" filterable remote v-model="form.userCompany"
							 placeholder="请选择使用单位" clearable :disabled='detailDisable'>
								<el-option v-for="item in userUnitArr" :value="item.id" :label="item.name" :key='item.id'>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="账号:" :label-width="formLabelWidth" prop="account">
							<el-input size="mini" v-model.trim="form.account" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="2" v-if="title == '编辑使用单位账户'">
						<span class="brandColor cursor" style='display: inline-block; margin-top: 10px;margin-left: 5px;' @click="openPwd">修改密码</span>
					</el-col>
				</el-row>
				<transition name='el-fade-in-linear'>
					<div v-if="pwdListShow">
						<el-row>
							<el-col :span="10" :offset='1'>
								<el-form-item label="密码:" :label-width="formLabelWidth" prop="pass">
									<el-input size="mini" type="password" v-model.trim="form.pass" autocomplete="off" clearable :disabled='detailDisable'></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="10" :offset='1'>
								<el-form-item label="确认密码:" :label-width="formLabelWidth" prop="checkPass">
									<el-input size="mini" type="password" v-model.trim="form.checkPass" autocomplete="off" clearable :disabled='detailDisable'></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
				</transition>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="close(2)">取 消</el-button>
				<el-button type="primary" @click="submit('form')" v-loading='ensureBtn' v-if="!detailDisable">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog custom-class="imgDialogShow" :visible.sync="imgDialogShow" :append-to-body='true' :before-close='closeImg'>
			<img :src="dialogImgUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
	import {
		axiosPost,
		axiosGet,
		loadFn,
		axiosChange,
	} from "@/common.js"
	import {
		pass,
		account,
		userCompany
	} from "./rule.js"
	export default {
		props: ['addAndCompileShow', 'isAddOrComp', 'rowId'],
		mounted() {
			if (this.title == '添加使用单位账户') {
				this.isLoading = false
			}
		},
		data() {
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.form.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			}
			return {
				formLabelWidth: '120px',
				form: {
					userTrueName: '',
					userPhone: '',
					userCompany: '',
					account: '',
					pass: '',
					checkPass: '',
				},
				ensureBtn: false,
				rules: {
					userCompany,
					account,
					pass,
					checkPass: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}],
				},
				isLoading: true,
				dialogImgUrl: '',
				imgDialogShow: false,
				updataType: '',
				lastUpdataTime: '',
				recordCon: '',
				recordCon1: '',
				pwdListShow: true,
				old_username: '',
				userUnitArr: [],
				signImg: ''
			}
		},
		computed: {
			detailDisable() {
				if (this.title == '使用单位账户详情') {
					return true
				} else {
					return false
				}
			},
			title() {
				if (this.isAddOrComp == 1) {
					return '添加使用单位账户'
				} else if (this.isAddOrComp == 2) {
					this.getCompileList()
					return '编辑使用单位账户'
				} else {
					this.getCompileList()
					return '使用单位账户详情'
				}
			},
			roleId() {
				if (localStorage.role) {
					return JSON.parse(localStorage.role).id
				} else {
					return ''
				}
			},
		},
		methods: {
			lookBigImg() {
				this.imgDialogShow = true
				this.dialogImgUrl = this.signImg
			},
			//获取使用单位
			userPublic(params) {
				axiosGet('/user/company/', params, (res) => {
					if (res.code == 0) {
						this.userUnitArr = res.detail.results
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			getUserUnit() {
				let params = {
					company_type: 300,
					page_size_count: 30
				}
				this.userPublic(params)
			},
			//使用单位开启搜索
			findUserUnit(query) {
				console.log(query)
				let params = {
					company_type: 300,
					key_words: query
				}
				this.userPublic(params)
			},
			//修改密码
			openPwd() {
				this.pwdListShow = !this.pwdListShow
			},
			//添加/编辑
			async oprationUintPub(value) {
				let url = ''
				let method = ''
				let rowId = this.rowId ? this.rowId : ''
				let data = {
					company: this.form.userCompany,
					username: this.form.account,
					pwd: this.form.pass,
					phone: this.form.userPhone,
					real_name: this.form.userTrueName,
					person_type: 20
				}
				if (value == 1) {
					url = '/user/bind/'
					method = 'post'
				} else {
					url = '/user/bind/' + rowId + '/'
					method = 'put'
					data.old_username = this.old_username
				}
				axiosChange(url, method, data, (res) => {
					this.ensureBtn = false
					if (res.code == 0) {
						this.close(1)
						this.$message({
							type: 'success',
							message: '操作成功'
						})
					} else {
						// this.form.userPhone = ''
						this.$message.error(res.detail.result)
					}
				})
			},
			//获取编辑 详情数据
			getCompileList() {
				this.pwdListShow = false
				let rowId = this.rowId ? this.rowId : ''
				let url = '/user/bind/' + rowId + '/'
				axiosGet(url, {}, (res) => {
					this.isLoading = false
					if (res.code == 0) {
						this.form.account = res.detail.username
						this.form.userPhone = res.detail.phone
						this.form.userTrueName = res.detail.real_name
						this.old_username = res.detail.username
						this.signImg = res.detail.sign_image
						this.form.userCompany = res.detail.company_id
						this.userUnitArr = [{
							id: res.detail.company_id,
							name: res.detail.company_name
						}]
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//提交
			submit(ruleForm) {
				this.$refs[ruleForm].validate((valid) => {
					if (valid) {
						this.ensureBtn = true
						if (this.isAddOrComp == 1) {
							this.oprationUintPub(1)
						} else {
							this.oprationUintPub(2)
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//关闭
			close(value) {
				let newValue = 2
				if (value) {
					newValue = value
				}
				this.$emit('detailMaskShow', newValue)
			},
			closeImg() {
				this.imgDialogShow = false
			},
		}
	}
</script>
<style scoped lang="less">
</style>
